/**
 * Created by tanbingqin on 2019/09/12.
 */
import React from 'react';
import { connect } from 'react-redux';
import { messages } from 'share/common'
import { Alert, Row, Col, Switch, Divider } from 'antd';
import LanguageInput from 'components/template/language-input/language-input'

class ItineraryPrompt extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      promptList: [
        {
          "type" : 1001, //机票
          "enable": false,
          "tips": "",
          "tipsI18n": []
        },
        {
          "type" : 1002, //火车
          "enable": false,
          "tips": "",
          "tipsI18n": []
        },
        {
          "type" : 1003, //酒店
          "enable": false,
          "tips": "",
          "tipsI18n": []
        },
        {
          "type" : 1011, //非TMC酒店
          "enable": false,
          "tips": "",
          "tipsI18n": []
        },
        {
          "type" : 1012, //非TMC机票
          "enable": false,
          "tips": "",
          "tipsI18n": []
        },
        {
          "type" : 1013, //市内交通
          "enable": false,
          "tips": "",
          "tipsI18n": []
        },
        {
          "type" : 1014, //水陆客运
          "enable": false,
          "tips": "",
          "tipsI18n": []
        },
        {
          "type" : 1008, //用车
          "enable": false,
          "tips": "",
          "tipsI18n": []
        },
        {
          "type" : 1010, //用餐
          "enable": false,
          "tips": "",
          "tipsI18n": []
        },
        {
          "type" : 1006, //餐补
          "enable": false,
          "tips": "",
          "tipsI18n": []
        },
        {
          "type" : 1004, //其他
          "enable": false,
          "tips": "",
          "tipsI18n": []
        }
      ]
    }
  }

  componentWillMount() {
    const { promptList } = this.props;
    this.initData(promptList);
  };

  componentWillReceiveProps(nextProps) {
    this.initData(nextProps.promptList);
  };

  initData = (dataList) => {
    let { promptList } = this.state;
    promptList.map(item => {
      let isHasExist = false; //是否存在相应配置
      dataList && dataList.map(data => {
        if (item.type === data.type) {
          isHasExist = true;
          item.enable = data.enable;
          item.tips = data.tips;
          item.tipsI18n = JSON.parse(JSON.stringify(data.tipsI18n));
        }
      });
      if (!isHasExist) {
        item.enable = false;
        item.tips = "";
        item.tipsI18n = [];
      }
    });
    this.setState({promptList});
  };

  //返回行程type对应的行程名称
  getName = (type) => {
    switch (type) {
      case 1001:
        return messages('setting.key2230')/*TMC机票行程*/;
      case 1002:
        return messages('setting.key725')/*火车行程*/;
      case 1003:
        return messages('setting.key724')/*TMC酒店行程*/;
      case 1011:
        return messages('mcd.cus.hotel')/*非TMC酒店行程*/;
      case 1012:
        return messages('mcd.cus.airline')/*非TMC机票*/;
      case 1013:
        return messages('mcd.cus.city.traffic')/*市内交通*/;
      case 1014:
        return messages('mcd.cus.amphibious')/*水陆客运*/;
      case 1008:
        return messages('setting.key1997')/*用车行程*/;
      case 1010:
        return messages('setting.key2228')/*用餐*/;
      case 1006:
        return messages('setting.key1856')/*差补*/;
      case 1004:
        return messages('setting.key726')/*其他交通*/;
    }
    return "";
  };

  handleStatusChange = (value, type) => {
    let { promptList } = this.state;
    promptList.map(item => {
      if (item.type === type) {
        item.enable = value;
      }
    });
    this.setState({promptList}, this.handleChange);
  };

  handleLanguageInput = (value, i18n, type) => {
    let { promptList } = this.state;
    promptList.map(item => {
      if (item.type === type) {
        item.tips = value;
        item.tipsI18n = i18n;
      }
    });
    this.setState({promptList}, this.handleChange);
  };

  handleChange = () => {
    const { promptList } = this.state;
    const { onChange } = this.props;
    if (onChange) {
      onChange(promptList);
    }
  };

  //获取多语言输入框的字符长度
  getInpRule = (num) => {
    const { languageList } = this.props;
    let inpRule = [];
    languageList.map(language => {
      inpRule.push({
        length: num,
        language: language.code.toLowerCase()
      });
    });
    return inpRule;
  };

  render() {
    const { disabled } = this.props;
    const { promptList } = this.state;

    return (
      <div>
        <Alert
          style={{margin: '20px 0'}}
          message={messages('setting.key2231')/*行程提示设置*/}
          description={(
            <div>
              {messages('setting.key2232')/*设置申请单中的行程是否需要开启提示功能，以及提示文字的自定义内容。*/}
            </div>
          )}
          type="info"
          showIcon
        />
        {promptList.map((item, index) => {
          return (
            <div>
              <Row type="flex" align="middle" style={{height: '64px'}}>
                <Col span={6} style={{paddingLeft: 24}}>{this.getName(item.type)}：</Col>
                <Col span={4}>
                  <Switch
                    checked={item.enable}
                    disabled={disabled}
                    onChange={value => this.handleStatusChange(value, item.type)}
                  />
                </Col>
                <Col span={14}>
                  <LanguageInput
                    nameChange={(value, i18n) => this.handleLanguageInput(value, i18n, item.type)}
                    width={'100%'}
                    name={item.tips}
                    disabled={disabled}
                    isEdit
                    inpRule={this.getInpRule(200)}
                    mainLanguageIsRequired={false}
                    i18nName={item.tipsI18n}
                  />
                </Col>
              </Row>
              {index !== promptList.length - 1 && (
                <Divider style={{margin: '0 0'}} />
              )}
            </div>
          )
        })}
      </div>
    )
  }
}

ItineraryPrompt.propTypes = {
  disabled: React.PropTypes.bool,  //是否可编辑
  promptList: React.PropTypes.array, //行程提示的数据列表
  onChange: React.PropTypes.func  //数据变化的回调
};

function mapStateToProps(state) {
  return {
    languageList: state.login.languageList
  }
}

export default connect(mapStateToProps)(ItineraryPrompt)
